<html>
<head>
    <title>商品管理</title>
    <!---引入layui框架的css样式 --->
    <link href="/lib/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item" style="margin-top: 15px">

        <div class="layui-inline">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-inline">
                <input type="text" id="search2" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select  id="select1">
                    <option value="">所有</option>
                    <option value="1">上架</option>
                    <option value="0">下架</option>
                </select>
            </div>
        </div>

        <input id="sear" type="button" value="查询" class="layui-btn layui-btn-primary">
        <input id="add" type="button" value="新增" class="layui-btn">
        <input id="del" type="button" value="删除" class="layui-btn">
        <table id="uTable"></table>
    </div>
</form>

<!--弹出窗口的模板-->
<script id="template1" type="text/html">
    <form class="layui-form" action="" lay-filter="form1">

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">商品名称</label>
                <div class="layui-input-inline">
                    <input type="hidden" name="id">
                    <input type="text" name="name" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">一级分类</label>
                <div class="layui-input-inline">
                   <select id="topSelect" lay-filter="topSelect"></select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">二级分类</label>
                <div class="layui-input-inline">
                    <select id="secondSelect" name="categoryId"></select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">价格</label>
                <div class="layui-input-inline">
                    <input type="number" name="price" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">版本</label>
                <div class="layui-input-inline">
                    <input type="text" name="edition" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">颜色</label>
                <div class="layui-input-inline">
                    <input type="text" name="color" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-inline">
                    <input type="text" name="title" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">分类图标</label>
                <div class="layui-input-inline">
                    <img id="avatarImg" src="" height="50px" width="50px"/>
                    <input type="text" id="avatarInput" name="imgPath" autocomplete="off" class="layui-input"/>
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="reset" value="重置" class="layui-btn layui-btn-primary">
                <input id="save" type="button" value="保存" class="layui-btn">
            </div>
        </div>
    </form>
</script>
<!--表格操作模板-->
<script id="template2" type="text/html">
    <input lay-event="edit" type="button" class="layui-btn layui-btn-xs" value="编辑">
    <input lay-event="delete" type="button" class="layui-btn layui-btn-xs layui-bg-red" value="删除">
    <input lay-event="att" type="button" class="layui-btn layui-btn-xs layui-bg-orange" value="附件">
</script>
<!--弹出附件-->
<script id="template3" type="text/html">
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="ID-upload-demo-btn-2">
            <i class="layui-icon layui-icon-upload"></i> 多图片上传
        </button>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
            预览图：
            <div class="layui-upload-list" id="upload-demo-preview"></div>
        </blockquote>
    </div>
</script>
<!--状态切换的模板-->
<script id="ID-table-demo-templet-switch" type="text/html" th:inline="none">
    <input type="checkbox" name="status" value="{{= d.id }}" title="上架|下架" lay-skin="switch" lay-filter="demo-templet-status" {{=d.status==1?'checked':''}}>
</script>

<script src="/lib/layui/layui.js"></script>

<script src="/js/common.js"></script>

<script th:inline="none">
    //告诉浏览器加载layui框架中哪些组件
    //加载完小组件 就执行function
    layui.use(['table','layer','form'],function(){
        // console.log("123");
        //第一步：先对加载的组件起名字
        var table=layui.table;
        var layer=layui.layer;
        var $ = layui.jquery;
        var form = layui.form;
        var upload = layui.upload;

        //给批量删除绑定事件
        $("#del").on("click",function (){
            var o = table.checkStatus("uTable");
            if(o.data.length === 0){
                layer.msg("至少选中一行");
                return false;
            }
            layer.confirm("你确定要删除选中的商品吗？",function (){
                var ids = "";
                $.each(o.data,function (index,item){
                    if(ids){
                        ids+=",";
                    }
                    ids+=item.id;
                });
                $.post("/product/delete",{ids:ids},function (){
                    layer.closeAll();
                    layer.msg("删除成功");
                    $("#sear").click();
                });
            });
            });


        //给查询按钮绑定事件
        $("#sear").on("click",function (){
            //用js发起一个请求去要一些数据回来，要到之后把数据插入到table中
            //通过table组件渲染表格
            table.render({
                elem:"#uTable",
                url:"/product/select",
                cols:[[
                    {title: "选择", type: "checkbox"},
                    {title:"序号",type: "numbers"},
                    {title: "商品名称",field: "name"},
                    {title: "版本",field: "edition"},
                    {title: "分类",field: "categoryName"},
                    {title: "颜色",field: "color"},
                    {title: "价格",field: "price"},
                    {title: '状态', width:90, templet: '#ID-table-demo-templet-switch'},
                    {title: "操作",templet: "#template2"}
                ]],
                where:{name:$("#search2").val(),status:$("#select1").val()},
                page:true,
                limits:[5,10,20],
                limit:5
            });
        }).click();

        //给切换状态绑定事件
        form.on('switch(demo-templet-status)', function(obj){
            console.log(obj.value);//要根据商品的ID
            console.log(obj.elem.checked);//true就是上架，false就是下架
            $.post("/product/status",{id:obj.value,status: obj.elem.checked?1:0},function (){
                layer.msg("更新状态成功");
            });
        });

        //根据一级分类的选项加载二级分类
        var loadCategory = function (f){
            //获取一级下拉框的ID
            var topId = $("#topSelect").val();
            $.get("/category/children?id="+topId,function (children){
                //清空原来二级分类的所有option
                $("#secondSelect").html();
                $.each(children,function (index,item){
                    $("#secondSelect").append("<option value = '"+item.id+"'>"+item.name+"<option/>");
                });
                form.render();

                if (f){
                    f();
                }
            });
        };

        //给新增的按钮绑定事件
        $("#add").on("click",function (){
            //发请求获取所有的顶级分类
            $.get("/category/children?id=0",function (tops) {
                layer.open({
                    title: "新增商品",
                    type: 1,
                    area: ['400px', '500px'],
                    content: $("#template1").html()
                });
                $.each(tops, function (index, item) {
                    $("#topSelect").append("<option value = '" + item.id + "'>" + item.name + "<option/>");
                })

                form.render();
                loadCategory();
                // 过滤器
                form.on("select(topSelect)", function () {
                    loadCategory();
                });

                upload.render({
                    elem: "#avatarImg",
                    url: "/attachment/upload",
                    done: function (res, index, upload) {
                        if (res.code === 0) {
                            $("#avatarInput").val(res.data, filePath);
                            $("#avatarImg").val("src", res.data.filePath);
                        }
                    }
                });
            });
        });


        //新增和编辑的保存
        $("body").on("click","#save",function (){
            var data = form.val("form1");
            $.post("/product/save",data,function (){
                layer.closeAll();
                layer.msg("保存成功");
                $("#sear").click();
            });
        });

        //给表格操作绑事件
        table.on("tool",function (obj){
            var event = obj.event;
            var data = obj.data;//当前这一行的数据
            if (event==="edit"){
                //说明点了编辑
                //去后台获取这个商品的所有的数据,取成功了再弹出
                $.get("/product/"+data.id,function (product){

                    $.get("/category/children?id=0",function (tops){

                        layer.open({
                            title:"编辑商品",
                            type:1,
                            area:['400px','500px'],
                            content:$("#template1").html()
                        });
                        upload.render({
                            elem: "#avatarImg",
                            url: "/attachment/upload",
                            done: function (res, index, upload) {
                                if (res.code === 0) {
                                    $("#avatarInput").val(res.data.filePath);
                                    $("#avatarImg").val("src",res.data.filePath);
                                }
                            }
                        });
                        $.each(tops,function (index,item){
                            $("#topSelect").append("<option value = '"+item.id+"'>"+item.name+"<option/>");
                        })
                        //Ajax
                        //加载二级之前，回显一级分类数据
                        $("#topSelect").val(product.topCategory);
                        loadCategory(function (){
                            form.val("form1",product);
                        });
                    });
                });
            }
            if (event==="delete"){//说明点了删除
                layer.confirm("您确定要删除这个商品吗？",function (){
                    $.post("/product/delete",{ids:data.id},function (){
                            layer.closeAll();
                            layer.msg("删除成功");
                            $("#sear").click();
                    });
                },function (){});
            }
            if (event === "att"){
                // 查之前上传过的附件，在弹出窗口，回显

                layer.open({
                   type:1,
                   area:["400px","400px"],
                    title:"商品附件",
                    content:$("#template3").html()
                });

                var attIds = "";
                // 多图片上传
                upload.render({
                    elem: '#ID-upload-demo-btn-2',
                    url: '/attachment/upload', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                    multiple: true,
                    before: function(obj){
                        // 预读本地文件示例，不支持ie8
                        obj.preview(function(index, file, result){
                            $('#upload-demo-preview').append('<img src="'+result+'" alt="">')
                        });
                    },
                    done: function(res){
                        if (attIds){
                            attIds+=",";
                        }
                        attIds+=res.data.id;
                    },
                    allDone: function () {
                        //把上传的文件更新给这个商品
                        $.post("/product/bind",{id:data.id,attIds:attIds});
                    }
                });
            }
        });
    });
</script>
</body>
</html>

